<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <title>点点</title>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="height:600px"></div>
<!-- ECharts单文件引入 -->
<script src="./js/echarts2.js"></script>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>
<script src="./js/diandian.js"></script>
<script type="text/javascript">
    // 路径配置
    require.config({
        paths: {
            echarts: './dist'
        }
    });

    // 使用
    require(
        [
            'echarts',
            'echarts/chart/map' // 使用柱状图就加载bar模块，按需加载
        ],
        function (ec) {
            // 基于准备好的dom，初始化echarts图表
            var myChart = ec.init(document.getElementById('main'));
            var cityMap = {
                "china": "kunyushan",
            };
//            var curIndx = 0;
            var mapType = [];
            var mapGeoData = require('echarts/util/mapData/params');
            console.log(mapGeoData)
            for (var city in cityMap) {
                mapType.push(city);
                // 自定义扩展图表类型
                mapGeoData.params[city] = {
                    getGeoJson: (function (c) {
                        var geoJsonName = cityMap[c];
                        return function (callback) {
                            $.getJSON('./js/' + geoJsonName + '.json', callback);
                        }
                    })(city)
                }
            }

            var option = {
                backgroundColor: '#1b1b1b',
                color: [
                    'rgba(255, 255, 255, 0.8)',
                    'rgba(14, 241, 242, 0.8)',
                    'rgba(37, 140, 249, 0.8)'
                ],
                title : {
                    text: '大规模MarkPoint特效',
                    subtext: '纯属虚构',
                    x:'center',
                    textStyle : {
                        color: '#fff'
                    }
                },
                legend: {
                    orient: 'vertical',
                    x:'left',
                    data:['强','中','弱'],
                    textStyle : {
                        color: '#fff'
                    }
                },
                toolbox: {
                    show : true,
                    orient : 'vertical',
                    x: 'right',
                    y: 'center',
                    feature : {
                        mark : {show: true},
                        dataView : {show: true, readOnly: false},
                        restore : {show: true},
                        saveAsImage : {show: true}
                    }
                },
                series : [
                    {
                        name: '弱',
                        type: 'map',
                        mapType: "china",
                        itemStyle:{
                            normal:{
                                borderColor:'rgba(100,149,237,1)',
                                borderWidth:1.5,
                                areaStyle:{
                                    color: '#1b1b1b'
                                }
                            }
                        },
                        data : [],
                        markPoint : {
                            symbolSize: 2,
                            large: true,
                            effect : {
                                show: true
                            },
                            data : (function(){
                                var data = [];
//                                var len = 3000;
//                                var geoCoord
//                                while(len--) {
//                                    geoCoord = placeList[len % placeList.length].geoCoord;
//                                    data.push({
//                                        name : placeList[len % placeList.length].name + len,
//                                        value : 10,
//                                        geoCoord : [
//                                            geoCoord[0] + Math.random() * 5 - 2.5,
//                                            geoCoord[1] + Math.random() * 3 - 1.5
//                                        ]
//                                    })
//                                }
                                return data;
                            })()
                        }
                    },
                    {
                        name: '中',
                        type: 'map',
                        mapType:  "china",
                        data : [],
                        markPoint : {
                            symbolSize: 3,
                            large: true,
                            effect : {
                                show: true
                            },
                            data : (function(){
                                var data = placeList;
//                                var len = 1000;
//                                var geoCoord
//                                while(len--) {
//                                    geoCoord = placeList[len % placeList.length].geoCoord;
//                                    data.push({
//                                        name : placeList[len % placeList.length].name + len,
//                                        value : 50,
//                                        geoCoord : [
//                                            geoCoord[0] + Math.random() * 5 - 2.5,
//                                            geoCoord[1] + Math.random() * 3 - 1.5
//                                        ]
//                                    })
//                                }
                                return data;
                            })()
                        }
                    },
                    {
                        name: '强',
                        type: 'map',
                        mapType: "china",
                        hoverable: false,
                        roam:true,
                        data : [],
                        markPoint : {
                            symbol : 'diamond',
                            symbolSize: 6,
                            large: true,
                            effect : {
                                show: true
                            },
                            data : (function(){
                                var data = [];
//                                var len = placeList.length;
//                                while(len--) {
//                                    data.push({
//                                        name : placeList[len].name,
//                                        value : 90,
//                                        geoCoord : placeList[len].geoCoord
//                                    })
//                                }
                                return data;
                            })()
                        }
                    }
                ]
            };
            // 为echarts对象加载数据
            myChart.setOption(option);
        }
    );
</script>
</body>